<script setup lang="ts">
import {reactive, ref} from "vue";
import {check, getCheckOrder} from "@/api/order";

defineOptions({
  name: "Order"
});

const form = reactive({
  name: ""
});
const formRef = ref();
const dataList = ref([]);
const loading = ref(true);

async function onSearch() {
  loading.value = true;
  getCheckOrder({current: dataList.value.current, name: form.name}).then(res => {
    console.log(res.data);
    dataList.value = res.data.data;
    setTimeout(() => {
      loading.value = false;
    }, 1000);
  })
}

const handleChangeCurrent = (val: any) => {
  dataList.value.current = val;
  onSearch();
}

const resetForm = formEl => {
  if (!formEl) return;
  formEl.resetFields();
  onSearch();
};
const change = (id: any, status: any) => {
  check({id: id, status: status});
  onSearch();
}
onSearch();
</script>

<template>
  <div class="main">
    <el-form
        ref="formRef"
        :inline="true"
        :model="form"
        class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
    >
      <el-form-item label="订单号：" prop="name">
        <el-input
            v-model="form.name"
            placeholder="订单号"
            clearable
            class="!w-[180px]"
        />
      </el-form-item>
      <el-form-item>
        <el-button
            type="primary"
            :loading="loading"
            @click="onSearch"
        >
          搜索
        </el-button>
        <el-button @click="resetForm(formRef)">
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <el-table :data="dataList.records" table-layout="auto">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="sn" label="订单号"></el-table-column>
      <el-table-column prop="receiverName" label="收货人" show-overflow-tooltip></el-table-column>
      <el-table-column prop="totalAmount" label="订单金额" show-overflow-tooltip></el-table-column>
      <el-table-column label="订单状态" show-overflow-tooltip>
        <template #default="scope">
          <el-tag>{{ scope.row.orderStatusStr }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="created" label="创建时间" show-overflow-tooltip></el-table-column>
      <el-table-column prop="payTime" label="支付时间" show-overflow-tooltip></el-table-column>
      <el-table-column prop="note" label="备注" show-overflow-tooltip></el-table-column>
      <el-table-column label="快速操作" show-overflow-tooltip>
        <template #default="scope">
          <el-button type="primary" size="small" v-if="scope.row.orderStatus===-2||scope.row.orderStatus===-3"
                     @click="change(scope.row.id,-4)">收货
          </el-button>
          <el-button type="danger" size="small" v-if="scope.row.orderStatus===-4||scope.row.orderStatus===-5"
                     @click="change(scope.row.id,-6)">驳回
          </el-button>
          <el-button type="primary" size="small" v-if="scope.row.orderStatus===-4||scope.row.orderStatus===-5"
                     @click="change(scope.row.id,-5)">发出
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 100%">
      <el-pagination
          style="float: right"
          background
          layout="prev, pager, next"
          :total="dataList.total"
          :page-size="dataList.size"
          @current-change="handleChangeCurrent"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}

.main-content {
  margin: 24px 24px 0 !important;
}

.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
  }
}
</style>